<!-- 回收用户信息页面 -->
<template>
  <!-- 主布局 -->
  <div class="container">
    <!-- 卡片式布局 -->
    <el-card>
      <el-row :gutter="25">
        <!--设置间隙  -->
        <!-- 搜索区域 -->
        <el-col :span="10"
          ><!-- 列宽 -->
          <el-input
            placeholder="请输入搜索内容"
            :model="fromData.name"
            clearable
            @cleaer="searchUserList"
          >
            <!-- 搜索功能按钮，用语法糖绑定查询用户的方法 -->
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchUserList"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <!-- 添加用户按钮 -->
          <el-button type="primary" @click="searchUserList">搜索用户</el-button>
        </el-col>
      </el-row>

      <!-- table表单数据-->
      <el-table
        style="
          font-size: 14px;
          box-shadow: 10px 10px 5px rgba(99, 99, 153, 0.2);
        "
        :data="userList"
        border
        stripe
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
      >
        <!-- 可勾选控件 -->
        <el-table-column type="selection"></el-table-column>

        <!-- 用户名列 -->
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 邮箱列 -->
        <el-table-column
          label="邮箱"
          prop="email"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 密码列 -->
        <el-table-column
          label="密码"
          prop="password"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 角色列 -->
        <el-table-column
          label="角色"
          prop="role"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 修改时间列 -->
        <el-table-column
          label="修改时间"
          prop="modifyTime"
          align="center"
          min-width="10%"
        ></el-table-column>

        <!-- 状态列 -->
        <el-table-column
          label="状态"
          prop="state"
          align="center"
          min-width="10%"
        >
          <template slot-scope="scope">
            <el-tag v-model="scope.row.state">{{ scope.row.state }}</el-tag>
          </template>
          <!-- <el-tag type="warning">待回收</el-tag> -->
        </el-table-column>

        <!-- 作用域操作，将操作放在同一个列中 -->
        <el-table-column label="操作" align="center" min-width="15%">
          <template slot-scope="scope">
            <!-- 回收按钮 -->
            <el-tooltip content="回收" placement="top">
              <el-button
                type="success"
                icon="el-icon-upload"
                size="mini"
                @click="handleRestore(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>

            <!--  修改按钮 -->
            <el-tooltip content="修改" placement="top">
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="deleteUser(scope.row.id)"
              ></el-button>
            </el-tooltip>

            <!--  删除按钮 -->
            <el-tooltip content="彻底删除" placement="top">
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="handleDelete(scope.row.id, scope.row)"
              ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- size-change:每页条数 -->
      <div class="block" style="text-align: center; margin-top: 15px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fromData.pageIndex"
          :page-sizes="pageInfo.pageSizes"
          :page-size="fromData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  delUser,
  restore,
} from "@/api/recycle/index"; /* 调用后台api的接口 */
export default {
  created() {
    this.queryUserList(); //挂载查询用户方法
    const loading = this.$loading({
      lock: true,
      text: "数据加载中......",
      spinner: "el-icon-loading",
      background: "rgba(0, 0, 0, 0.7)",
    });
    setTimeout(() => {
      loading.close();
    }, 1000); /* 设置时间为1秒 */
  },
  //数据定义
  data() {
    return {
      userList: [], //查询信息封装实体
      fromData: {
        name: "",
        pageIndex: 1, //当前页码，为第一页
        pageSize: 5, //默认每页最大数为5，可以动态的切换每页最大数
      },
      pageInfo: {
        total: 0, //总数，初始值为0
        pageSizes: [1, 5, 10, 20], //定义每次显示最大的条数
      },
    };
  },
  methods: {
    //查询在回收站用户的方法
    queryUserList() {
      var $that = this;
      list(this.fromData).then((res) => {
        if (res.code == 200 && res.success == "success") {
          $that.userList = res.data.list;
          $that.pageInfo.total = res.data.total;
        }
      });
    },

    //搜索员工方法实现
    searchUserList() {
      this.queryUserList();
      this.$message({
        message: "查询成功，结果如下",
        type: "success",
      });
    },

    //回收站功能已实现05.30
    handleRestore(index, row) {
      var that = this;
      this.$confirm(
        "此操作将还原用户： " + row.username + " , 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          //定义回收的参数，分别是id，用户名，邮箱，密码，修改时间，状态，角色
          var params = {
            id: row.id, //用户id
            username: row.username, //用户名
            email: row.email, //用户邮箱
            password: row.password, //用户密码
            modifyTime: row.modifyTime, //用户修改时间
            role: row.role, //用户角色
            state: row.state, //用户状态
          };
          restore(params).then(); /* 在回收的同时，将数据删除 */
          delUser(params).then((res) => {
            if (res.code == 200 && res.success == "success" && res.data >= 1) {
              this.$message({
                type: "success",
                message: "还原" + row.username + "成功!",
              });
              this.queryUserList();
            } else {
              this.$message({
                type: "success",
                message: "还原" + row.username + "失败!",
              });
            }
          });
        })
        .catch(() => {
          //点击取消
          this.$message({
            type: "info",
            message: "已取消还原",
          });
        });
    },

    //删除功能已实现05.30
    handleDelete(id, row) {
      this.$confirm(
        "此操作将永久删除 " + row.username + " , 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true, //将位置设置在中心
        }
      ).then(() => {
        var params = { id: row.id }; //根据用户id进行删除
        //点击确定
        delUser(params).then((res) => {
          if (res.code == 200 && res.success == "success" && res.data >= 1) {
            this.$message({
              type: "success",
              message: "删除" + row.username + "成功!",
            });
            this.queryUserList(); /* 重新调用查询回收站用户的方法 */
          } else {
            this.$message({
              type: "danger",
              message: "删除" + row.username + "失败!",
            });
          }
        });
      });
    },
    //每页显示的条目个数
    handleSizeChange(val) {
      this.fromData.pageSize = val;
      this.queryUserList(); //获取当前用户列表
    },
    //切换当前页数方法
    handleCurrentChange(val) {
      this.fromData.pageIndex = val;
      this.queryUserList(); //获取当前用户列表
    },
  },
};
</script>

<style Lang="less" scoped>
</style>

